<!--
 * @Author: liyin 2179253556@qq.com
 * @Date: 2023-02-07 14:01:44
 * @LastEditors: liyin 2179253556@qq.com
 * @LastEditTime: 2023-02-10 17:05:59
 * @FilePath: \vite-project\src\component\Common\Card.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <van-sticky>
        <div class="selectBox">
            <van-row>
                <van-col :span="12" @click="openDate">
                    <span :style="date ? 'color:#3D7FFF;' : 'color:#999;'">{{ date?date: '请选择时间' }}</span>
                    <van-icon name="arrow-down" color="#999999" style="margin-left:5px;" />
                </van-col>
                <van-col :span="12" @click="isTreeShow = true">
                    <span :style="fieldValue ? 'color:#3D7FFF;' : 'color:#999;'">{{ fieldValue?fieldValue: '请选择时间' }}</span>
                    <van-icon name="arrow-down" color="#999999" style="margin-left:5px;" />
                </van-col>
            </van-row>
        </div>
    </van-sticky>
    <!-- 日期选择器 -->
    <van-calendar v-model:show="isDateShow" teleport="#app" color="#3D7FFF" @confirm="onConfirm" />
    <!-- 联级选择器 -->
    <van-popup v-model:show="isTreeShow" teleport="#app" round position="bottom">
        <van-cascader v-model="cascaderValue" title="请选择所属班级" active-color="#3D7FFF" :options="options" @close="isTreeShow = false"
            @finish="onFinish" />
    </van-popup>
</template>
<script lang="ts" setup>
import { ref, reactive, onMounted, nextTick } from 'vue'
interface PropsType {
    // 是否需要边距，默认为要
    none?: boolean
    // 自定义的背景色
    bgColor?: string
    // 是否有margin-top。，默认有
    top?: boolean
    // 是否需要边框。默认为10px
    border?: string
}
const props = withDefaults(defineProps<PropsType>(), {
    none: false, // 默认值
    bgColor: '',
    top: true,
    border: '10'
})
const isDateShow = ref(false)
const date = ref('');
const openDate = () => {
    isDateShow.value = true
}
const formatDate = (date: any) => `${date.getMonth() + 1}/${date.getDate()}`;
const onConfirm = (value: any) => {
    isDateShow.value = false;
    date.value = formatDate(value);
};
const isTreeShow = ref(false)
const fieldValue = ref('');
const cascaderValue = ref('');
// 选项列表，children 代表子选项，支持多级嵌套
const options = [
    {
        text: '浙江省',
        value: '330000',
        children: [{ text: '杭州市', value: '330100' }],
    },
    {
        text: '江苏省',
        value: '320000',
        children: [{ text: '南京市', value: '320100' }],
    },
];
// 全部选项选择完毕后，会触发 finish 事件
const onFinish = async ({ selectedOptions }: any) => {
    isTreeShow.value = false;
    fieldValue.value = selectedOptions.map((option: any) => option.text).join('/');
};
</script>
<style lang="scss" scoped>
.selectBox {
    text-align: center;
    color: #999;
    background: #ffffff;
    padding: 0 0 10px 0;
}
</style>
